<template>
        <h1 style="text-align: center;font-size:25px;padding-bottom:10px">文件云端上传</h1>
        <el-card class="box-card" v-if="CurrentStatus">
                <template #header>
                        <div class="card-header">

                                <el-upload v-model:file-list="fileList" class="upload-demo"
                                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple
                                        :on-exceed="handleExceed" :on-change="handlePictureCardPreview"
                                        :on-preview="handlePreview" :on-remove="handleRemove" limit="1">
                                        <el-button type="success" plain>文件上传</el-button>
                                </el-upload>
                                <el-button type="danger" plain @click="DeleteFileCloud()">删除文件云端</el-button>
                        </div>
                </template>
                <div v-for="item, index in FileList" :key="index" class="text item">{{ item }}</div>
                <p class="FileClouseFont" v-for="item, index in dataSource">{{ item }} <el-button type="success" plain
                                @click="FileDown(index)">文件下载</el-button></p>
        </el-card>
        <div v-else class="FileClouseCreate">
                <el-button type="success" @click="CreateFileCloud()">创建文件云端</el-button>
        </div>
</template>
<style>
.FileClouseCreate {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 40px;
}

.FileClouseFont {
        margin-top: 10px;
        font-size: 16px;
}
</style>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getUserFileList, CreateUserFileCloud, DeleteUserFileCloud, FileCLoudUpload } from '../../../service/Filesystem.js'
import { getBase64 } from '/src/style.js'
import type { UploadProps } from 'element-plus'
import { ReadImageSrc } from '/src/config.js'

//*文件上传
const UploadFile = ref()
const UploadName = ref()
const UploadSrc = ref('')

//*图片上传成功获取图片路径
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile: any) => {
        getBase64(uploadFile.raw).then((res: any) => {
                const params = res.split(',') //*分割类型和base64内容
                UploadFile.value = params[1]
                UploadName.value = uploadFile.name
                const data = { user: localStorage.getItem('User'), name: uploadFile.name, size: uploadFile.size, file: params[1], type: uploadFile.raw.type }
                FileCLoudUpload(data).then(() => {
                        UploadSrc.value = ReadImageSrc + UploadName.value
                })

        })
}
// //*文件移除时
// const handleRemove = (uploadFile) => {
//   CloseUploadName.value = uploadFile.name
//   const data = { name: CloseUploadName.value,type:uploadFile.raw.type }
//   CloseUpload(data)
// }

//获取文件路径
const fileUrl = ref('')

//获取当前状态
const CurrentStatus = ref(false)
onMounted(() => {
        const data = { user: localStorage.getItem("User") }
        getUserFileList(data).then((res: any) => {
                if (res.code == 404) {
                        CurrentStatus.value = false
                } else {
                        CurrentStatus.value = true
                        dataSource.value = res.data.file
                        fileUrl.value = res.data.path
                }
        })
})
//*文件下载
function FileDown(index: any) {
        fileUrl.value = fileUrl.value.replace("C:\\phpstudy_pro\\WWW", "http://localhost:80")
        window.location.href = fileUrl.value + dataSource.value[index]

}
//*创建文件云端
function CreateFileCloud() {
        const data = { user: localStorage.getItem("User") }
        CreateUserFileCloud(data).then((res: any) => {
                console.log(res)
        })
}
//*删除文件云端
function DeleteFileCloud() {
        const data = { user: localStorage.getItem("User") }
        DeleteUserFileCloud(data).then((res: any) => {
                console.log(res)
        })
}


//获取文件列表
const dataSource = ref([

])
</script>